import { BackTop } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import {
  getCurrentInstance,
  setNavigationBarTitle,
  useReady,
} from "@tarojs/taro";
import React, { useState } from "react";
import { news_list } from "../../mocks";
import { INews } from "../../types";
import "./index.scss";
const NewsDetail = () => {
  const [newsDetail, setNewsDetail] = useState<INews>();

  useReady(() => {
    // TODO: 获取资讯ID
    const id = getCurrentInstance().router?.params.id ?? "";
    // 获取内容
    const [data] = news_list.filter((item) => item.id === Number(id));

    setNewsDetail(data);
    setNavigationBarTitle({
      title: data.title ?? "文章详情",
    });
  });

  return (
    <>
      <View className="news-detail">
        <View className="news-title">{newsDetail?.title}</View>
        <View
          className="content"
          dangerouslySetInnerHTML={{ __html: newsDetail?.content ?? "" }}
        />
        <BackTop
          threshold={200}
          zIndex={10}
          style={{ bottom: 30, right: 10 }}
        />
      </View>
    </>
  );
};

export default NewsDetail;
